<template>
  <popup v-model:show="show" round position="bottom">
    <div class="dir-select-confirm-btn">
      <van-button type="primary" size="small" @click="handleConfirm">确定</van-button>
    </div>
    <cascader
        v-model="cascaderValue"
        title="请选择文件夹"
        :options="options"
        :field-names="fieldNames"
        @close="onClose"
    />
  </popup>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Popup, showLoadingToast, showFailToast, Cascader, Button as VanButton   } from "vant";
import api from '../api/index'
import common from "../common/common";
const emits = defineEmits(['close', 'confirm'])
const uid = common.getLocalUid()
const show = ref(true)
const cascaderValue = ref('')
const options = ref([])
const fieldNames = {
  text: 'dir_name',
  value: 'dir_id',
  children: 'children',
};
const getFileListById = async (id?: string) => {
  let result = []
  try {
    const res = await api.getDirFileList({
      uid,
      dir_id: id || ''
    })
    if (res.directories && res.directories.length) {
      result = res.directories
      // res.directories.forEach((item) => {
      //   result.push({
      //     text: item.dir_name,
      //     value: item.id,
      //     parentId: id || '',
      //   })
      // })
    }
  } catch (e) {

  }
  return result
}
(async () => {
  options.value = await getFileListById()
})();
const onChange = async ({ value, selectedOptions, tabIndex }) => {
  // console.log(value, selectedOptions)
  // const lastIndex = selectedOptions.length - 1
  // if (value === selectedOptions[lastIndex].value && (!selectedOptions[lastIndex].children || selectedOptions[lastIndex].children.length === 0)) {
  //   const toast = showLoadingToast({
  //     message: '加载中...',
  //     forbidClick: true,
  //     overlay: true,
  //     duration: 0,
  //   })
  //   const res = await getFileListById(value)
  //   if (res.length) {
  //     selectedOptions[lastIndex].children = res
  //   }
  //   toast.close()
  // }
}
const onClose = () => {
  emits('close')
}
const handleConfirm = () => {
  emits('confirm', cascaderValue.value)
}
</script>

<style scoped lang="less">

</style>
